<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>

<body class="container-fluid">
    <div class="row">
        <!--header-->
        <div class="col-sm-12 col-md-3 left">
            <div class="row justify-content-between">
                <div class="col-6 col-sm-5 col-md-12 p-4">
                    <img src="images/c.jpg" alt="userPhoto" class="img-fluid p-2 border">
                    <h3 class="text-white text-center">白璐</h3>
                    <h5>求职意向：Web前段</h5>
                </div>
                <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                    <h4>出生年月</h4>
                    <p>1995年10月10日</p>
                    <h4>联系电话</h4>
                    <p>130XXXXXXXX</p>
                    <h4>电子邮箱</h4>
                    <p>abcd1234XXXX@qq.com</p>
                    <h4>联系地址</h4>
                    <p>北京市朝阳区</p>
                </div>
            </div>
        </div>
        <!--content-->
        <div class="col-sm-12 col-md-9 right p-0">
            <div class="my-4">
                <ul class="clearfix">
                    <li class="float-sm-start">
                        <i class="fa fa-user-circle-o fa-2x"></i>
                        <a href="index.html" class="ml-2">个人履历</a>
                    </li>
                    <li class="float-sm-start mx-sm-5">
                        <i class="fa fa-envelope-o fa-2x"></i>
                        <a href="contact.html" class="ml-2">请给我发送邮件</a>
                    </li>
                    <li class="float-sm-start">
                        <i class="fa fa-home fa-2x"></i>
                        <a href="photo.html" class="ml-2">生活照</a>
                    </li>
                </ul>
            </div>
            <h5 class="color1">生活照</h5>
            <div class="px-6 py-6 photo">
                <div class="card-group">
                    <div class="card bg-primary p-3">
                        <img src="images/001.jpg" class="card-img-top" alt="">
                    </div>
                    <div class="card bg-dark p-3">
                        <img src="images/002.jpg" class="card-img-top" alt="">
                    </div>
                    <div class="card bg-info p-3">
                        <img src="images/003.jpg" class="card-img-top" alt="">
                    </div>
                </div>
                <div class="card-group">
                    <div class="card bg-success p-3">
                        <img src="images/004.jpg" class="card-img-top" alt="">
                    </div>
                    <div class="card bg-danger p-3">
                        <img src="images/005.jpg" class="card-img-top" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>